@if (!isRoot()) {
  <div fNodeInput [fInputId]="node().key" fInputConnectableSide="top" class="top"></div>
}

<div fNodeInput [fInputId]="node().key + '/edge'" fInputConnectableSide="left" class="left"></div>

<div class="node-output-bottom flex items-center gap-2 h-3 absolute -bottom-[8px] left-1/2 -ml-10">
  <div fNodeOutput [fOutputId]="node().key + '/agent'" fOutputConnectableSide="bottom" [fOutputMultiple]="true">
    <div class="inner-dot cursor-crosshair">
      <ngm-plus-svg class="w-2 h-2 text-white" />
    </div>
  </div>
  <div fNodeOutput [fOutputId]="node().key + '/xpert'" fOutputConnectableSide="bottom" [fOutputMultiple]="true">
    <div class="inner-dot cursor-crosshair">
      <ngm-plus-svg class="w-2 h-2 text-white" />
    </div>
  </div>
  <div fNodeOutput [fOutputId]="node().key + '/toolset'" fOutputConnectableSide="bottom" [fOutputMultiple]="true">
    <div class="inner-dot cursor-crosshair">
      <ngm-plus-svg class="w-2 h-2 text-white" />
    </div>
  </div>
  <div fNodeOutput [fOutputId]="node().key + '/knowledge'" fOutputConnectableSide="bottom" [fOutputMultiple]="true">
    <div class="inner-dot cursor-crosshair">
      <ngm-plus-svg class="w-2 h-2 text-white" />
    </div>
  </div>
</div>

@if (xpertAgent()) {
  <div class="max-w-full flex justify-start items-center px-3 pt-3 pb-2 overflow-hidden">
    <emoji-avatar [avatar]="xpertAgent().avatar" small class="shrink-0 mr-2 rounded-lg overflow-hidden shadow-sm" />
    @if(isSensitive()) {
      <i class="ri-shield-keyhole-line mr-1 text-lg text-text-warning"
        [matTooltip]="'PAC.Xpert.SensitiveAgentTip' | translate: {Default: 'Sensitive agents require user confirmation before execution'}"
        matTooltipPosition="above">
      </i>
    }
    @if(isEnd()) {
      <i class="ri-stop-circle-line mr-1 text-lg text-text-secondary"
        [matTooltip]="'PAC.Xpert.EndAgentTip' | translate: {Default: 'The terminal agent, the run of chat ends after agent completed'}"
        matTooltipPosition="above">
      </i>
    }
    @if (isDisableOutput()) {
      <i class="ri-volume-mute-fill mr-1 text-lg text-sky-500"
        [matTooltip]="'PAC.Xpert.DisableOutputTip' | translate: {Default: 'Disable returning the agent\'s output to the user'}"
        matTooltipPosition="above">
      </i>
    }
    <div class="flex flex-col overflow-hidden text-base-content">
      <span class="text-base font-semibold uppercase truncate">{{agentLabel()}}</span>
    </div>
  </div>
  
  <div class="relative px-3 pb-2 w-full flex">
    <p class="px-2 text-sm text-token-text-secondary text-left whitespace-pre-line line-clamp-3" [title]="xpertAgent().description">{{xpertAgent().description}}</p>
  </div>

  <div class="relative px-3 pb-2 w-full flex">
    <copilot-model-select class="w-full" readonly hiddenLabel
      [inheritModel]="xpertCopilotModel()"
      [modelType]="eModelType.LLM"
      [copilotModel]="copilotModel()"
    />

    <div class="edge absolute -right-[4px] top-[7px]" fNodeOutput [fOutputId]="node().key + '/edge'" fOutputConnectableSide="right">
      <div class="inner-dot cursor-crosshair">
        <ngm-plus-svg class="w-2 h-2 text-white" />
      </div>
    </div>
  </div>

  @if (retry()?.enabled && retry().stopAfterAttempt) {
    <div class="w-full px-3">
      <div class="flex items-center justify-between px-[5px] py-1 bg-gray-100 border-[0.5px] border-transparent rounded-md uppercase font-medium text-sm text-text-tertiary">
        <div class="flex items-center">
          {{'PAC.Xpert.RetryTimes' | translate: {
              Default: 'Retry '+(retry().stopAfterAttempt - 1)+' times on failure',
              times: retry().stopAfterAttempt - 1
            }
          }}
        </div>
      </div>
    </div>
  }

  @if (fallback()?.enabled) {
    <div class="w-full px-3 flex flex-col items-start">
      <div class="px-1 text-sm">{{'PAC.Xpert.FallbackModel' | translate: {Default: 'Fallback Model'} }}:</div>
      <copilot-model-select readonly hiddenLabel class="w-full"
        [modelType]="eModelType.LLM"
        [copilotModel]="fallbackModel()"
      />
    </div>
  }

  @if (errorHandling()?.type) {
    <div class="w-full relative pt-1 pb-2 px-3">
      <div class="relative flex items-center justify-between px-[5px] h-7 bg-gray-100 rounded-md">
        <div class="text-sm font-medium uppercase text-text-tertiary">
          {{'PAC.Xpert.OnFailure' | translate: {Default: 'On Failure'} }}
        </div>
        @if (errorHandling().type === 'defaultValue') {
          <div class="system-xs-medium text-gray-500">
            {{'PAC.Xpert.OutputDefaultValue' | translate: {Default: 'Output Default Value'} }}
          </div>
        }
        @if (errorHandling().type === 'failBranch') {
          <div class="system-xs-medium text-gray-500">
            {{'PAC.Xpert.FailBranch' | translate: {Default: 'Fail Branch'} }}
          </div>
        }
      </div>

      @if (errorHandling().type === 'failBranch') {
        <div class="edge danger absolute -right-[4px] top-[9px]" fNodeOutput [fOutputId]="node().key + '/fail/edge'" fOutputConnectableSide="right">
          <div class="inner-dot cursor-crosshair">
            <ngm-plus-svg class="w-2 h-2 text-white" />
          </div>
        </div>
      }
    </div>
  }
}
